<template>
  <section>
    <div class="container">
      <div class="container-title">查询条件</div>
      <div class="container-body pd">
        <el-form
          label-position="right"
          label-width="100px"
          :model="searchForm"
          ref="searchForm"
          class="demo-form-inline"
        >
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="订单编号：" size="small" prop="number">
                <el-input
                  v-model="searchForm.number"
                  placeholder="请输入订单编号"
                  prefix-icon="el-icon-search"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单状态：" size="small" prop="ordersType">
                <el-select
                  v-model="searchForm.ordersType"
                  clearable
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in optionsIsFrozen"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-button
              class="is-tableBtn"
              size="small"
              @click="clearForm('searchForm')"
              >清空</el-button
            >
            <el-button
              class="is-tableBtn"
              type="primary"
              size="small"
              @click="GetTbOrdersList(searchForm)"
              >查询</el-button
            >
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="container">
      <div class="container-title">订单列表</div>
      <div class="container-body pd">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="number" label="订单编号" align="center">
          </el-table-column>
          <el-table-column prop="ordersTypeName" label="状态" align="center">
          </el-table-column>
          <el-table-column prop="totalPrice" label="总价" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-button
                class="btnwarning"
                type="warning"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >详情</el-button
              >
              <el-button
                class="btnwarning"
                type="danger"
                size="mini"
                :disabled="scope.row.ordersTypeName !='已完成'"
                @click="refundedrow(scope.$index, scope.row)"
                >订单退款</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          >
          </el-pagination>
          <div class="clear"></div>
        </div>
      </div>
    </div>

    <!-- 查询兑换详情弹窗 -->
    <el-dialog
      :visible.sync="createOrdersPop"
      :append-to-body="true"
      custom-class="form-dialog"
      @close="close()"
    >
      <div class="container" v-if="JSON.stringify(newOrdersForm)!='{}'">
        <div class="order-title">订单详情</div>
        <div class="container-body">
          <el-form
            label-position="right"
            label-width="100px"
            :model="newOrdersForm"
            ref="newOrdersForm"
            class="orderInfo-form"
          >
           <el-form-item label="下单时间：" prop="goodsName">
             {{newOrdersForm.createTime}}
            </el-form-item>
           <el-form-item label="订单状态：" prop="goodsName">
             {{orderTypes[newOrdersForm.ordersType]}}
            </el-form-item>
           <el-form-item label="订单总价：" prop="goodsName">
             ￥ {{newOrdersForm.totalPrice}}
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="container">
        <div class="order-title">商品列表</div>
        <div class="container-body">
          <el-table
            :data="newOrdersForm.items"
            border
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column prop="name" label="商品名称" align="center">
            </el-table-column>
            <el-table-column prop="num" label="数量" align="center">
            </el-table-column>
            <el-table-column label="单价" align="center">
               <template slot-scope="scope">
                ￥{{scope.row.price}}
               </template>
            </el-table-column>
            <el-table-column label="总价" align="center">
               <template slot-scope="scope">
                ￥{{scope.row.totalPrice}}
               </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    return {
      createOrdersPop: false, // 商品创建弹窗是否展示
      newGoodsForm: {}, // 商品详情
      newOrdersForm: {},
      newOrdersRule: {},
      optionsIsFrozen: [
        {
          value: 1,
          label: "待付款",
        },
        {
          value: 2,
          label: "已完成",
        },
        {
          value: 3,
          label: "待退款",
        },
        {
          value: 4,
          label: "已退款",
        },
      ],
      orderTypes:['','待付款','已完成','待退款','已退款'],
      page: 1,
      total: 0,
      tableData: [],
      loading: true,
      searchForm: {
        number: "",
        ordersType: "",
      },
    };
  },
  created() {
    this.GetTbOrdersList(this.searchForm);
  },
  methods: {
    clearForm(formName) {

      // 清空筛选
      this.$refs[formName].resetFields();
    },

    onSubmit() {},

    async GetTbOrdersList(searchForm) {
      this.loading = true;
      let skip = (this.page - 1) * 10;
      // 请求案例
      let res = await this.$store.dispatch("GetTbOrdersList", {
        number: searchForm.number,
        ordersType: searchForm.ordersType,
        skip,
      });
      if (res.success) {
        this.tableData = res.data.itmes || [];
        this.total = res.data.totalCount;
      }
      this.loading = false;
    },

    async handleEdit(index, row) {
      let res = await this.$store.dispatch("GetTbOrders", {
        id: row.id,
      });
      if (res.success) {
        this.newOrdersForm = res.data || {};
      } else {
        this.$message.error(res.ErrorMessage || "网络异常");
      }
      this.createOrdersPop = true;
    },
    async refunded(index, row) {
      let res = await this.$store.dispatch("PutTbOrdersRefunded", {
        id: row.id,
      });
      if (res.success) {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.GetTbOrdersList(this.searchForm);
      } else {
        this.$message.error(res.ErrorMessage || "网络异常");
      }
    },

    refundedrow(index, row) {
      this.$confirm("此操作将永久退款, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.refunded(index, row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退款",
          });
        });
    },

    resetFormESC(formName) {
      // 充值表单
      this.createOrdersPop = false;
      this.$refs[formName].resetFields();
    },
    createNew() {
      this.createOrdersPop = true;
      this.newOrdersForm = {};
    },
    close() {
      this.resetFormESC("newOrdersForm");
    },
    currentPage(page) {
      this.page = page;
      this.GetTbOrdersList(this.searchForm);
    },
  },
};
</script>
<style lang="scss" >
.orderInfo-form{
  .el-form-item{
    margin-bottom: 0px
  }
}
.order-title{
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #000
}
</style>
<style lang="scss" scoped>
@import "@/assets/varibles.scss";
.btn {
  margin-bottom: $btnHeight;
  color: $btnwarning;
}
.btnwarning {
  color: $btnwarning;
}

.pageBox {
  padding-top: 10px;
  clear: both;
  .el-pagination {
    float: right;
  }

  .clear {
    clear: both;
  }
}
</style>
